<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../../public/css/general.css">
    <link rel="stylesheet" href="../../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../../public/css/animate.css">
    <link rel="stylesheet" href="../../../../public/css/wechat/product.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="all-product">
    <div class="mask" v-if="isShowMask">
        <div class="change-num">
            <div class="top">输入数量</div>
            <div class="middle">
                <img @click="reduce()" src="../../../../public/images/reduce.png" alt="减">
                <input v-focus type="tel" v-model.number="num">
                <img @click="plus()" src="../../../../public/images/plus.png" alt="加">
            </div>
            <div class="bottom">
                <div @click="cancel()" class="cancel">取消</div>
                <div @click="confirm()" class="confirm button-jb-g">确定</div>
            </div>
        </div>
    </div>
    <div class="top-bar">
        <a href="javascript:;" @click="showCity=!showCity" class="location">
            <img src="../../../../public/images/location.png" alt="location">城市
        </a>
        <span class="search" @click="toSearch()">
            <img src="../../../../public/images/search.png" alt="搜索">
            <input type="text" v-model="searchValue">
        </span>
        <a :href="'tel://'+consumerHotline" class="service">
            <img src="../../../../public/images/service.png" alt="客服">客服
        </a>
    </div>

    <div class="content">
        <div class="bubble" v-if="showCity">
            <div class="location">
                <img src="../../../../public/images/radio-selected.png" alt="">广州
            </div>
        </div>
        <div class="jiantou" v-if="!allCategories" @click="showAllCategories()">
            <i class="iconfont iconfont-g" :class="{'icon-xiajiantou':!allCategories, 'icon-shangjiantou':allCategories}"></i>
        </div>
        <div class="nav-bar" v-if="!allCategories">
            <div class="container" :style="{width: Math.ceil(productCategories.length/5)*100+'%'}">
                <ul v-for="i in navBarUlNums" :style="{width:(productCategories.length-(i+1)*5>0?'100%':(productCategories.length-i*5)*20+'%')}">
                    <li @click="navBarSelected=c" :class="{selected: navBarSelected==c}" v-for="c in getProductCategories(i, 5, 5)" v-text="c"></li>
                </ul>
            </div>
        </div>
        <div class="all-categories-bar" v-if="allCategories">
            <div class="top">
                <div class="title">切换分类</div>
                <div class="icon" @click="showAllCategories()">
                    <i class="iconfont iconfont-g icon-shangjiantou"></i>
                </div>
            </div>
                <div v-for="i in navBarUlNums">
                    <div @click="selectNavBar(c, i)" :class="{selected: navBarSelected==c}" v-for="c in getProductCategories(i, 4, 4)" v-text="c"></div>
                </div>
        </div>
        <div class="products">
            <div class="sale-categories">
                <div @click="saleCategorieSelected=s" :class="{selected:saleCategorieSelected==s}" v-for="s in saleCategories" v-text="s"></div>
            </div>
            <div class="product">
                <div v-for="(p, ind) in searchResults">
                    <div class="card" v-if="ind==0">
                        <div class="icon" @click="toShowDetails(p)">
                            <img :src="p.img" alt="">
                        </div>
                        <div class="middle">
                            <div @click="toShowDetails(p)" class="name bzs-multi-text-ellipsis" v-text="p.name"></div>
                            <div class="norm bsz-text-ellipsis" v-text="p.norm"></div>
                            <div class="bar">
                                <div class="money" v-text="'¥'+p.basePrice+'/'+p.unit"></div>
                                <div class="product-control">
                                    <img v-if="p.normList[0].showControl && (numObj[p.id+'-'+p.normList[0].id] && numObj[p.id+'-'+p.normList[0].id]>0)" @click="clickReduce(p, p.normList[0])"  src="../../../../public/images/reduce.png" alt="">
                                    <span v-if="p.normList[0].showControl && (numObj[p.id+'-'+p.normList[0].id] && numObj[p.id+'-'+p.normList[0].id]>0)" @click="changeMask(p, p.normList[0])" class="product-num" v-text="numObj[p.id+'-'+p.normList[0].id]">1</span>
                                    <span class="plus-control" @touchstart.prevent="p.normList[0].click=!p.normList[0].click" @touchend.prevent="clickPlus(p, p.normList[0])">
                                        <img class="no-touch" v-show="!p.normList[0].click"  src="../../../../public/images/plus.png" alt="">
                                        <img class="has-touch" v-show="p.normList[0].click" src="../../../../public/images/plus2.png" alt="">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" v-if="ind!=0">
                        <div class="icon" @click="toShowDetails(p)">
                            <img :src="p.img" alt="">
                        </div>
                        <div class="middle">
                            <div @click="toShowDetails(p)" class="name bzs-multi-text-ellipsis" v-text="p.name"></div>
                            <div class="norm bsz-text-ellipsis" v-text="p.norm"></div>
                            <div class="bar">
                                <div class="money" v-text="'¥'+p.basePrice+'/'+p.unit"></div>
                                <div :class="{'button-select': p.buttonSelect}" @touchstart.stop="p.buttonSelect=!p.buttonSelect" @touchend.stop="p.buttonSelect=!p.buttonSelect" @click="toShowNorm(p)" v-text="p.showNorm?'收起':'规格'" class="button">规格</div>
                            </div>
                        </div>
                    </div>
                    <div class="norm-card" v-if="p.showNorm && ind!=0">
                        <div class="card-content">
                            <div class="top">
                                <div v-for="n in p.priceList">
                                    <span v-text="n.money"></span>
                                    <span v-text="n.num"></span>
                                </div>
                                <div>
                                    <span>
                                        <span class="money-unit" v-text="p.moneyUnit"></span>/<span class="unit" v-text="p.unit"></span>
                                    </span>
                                    <span v-text="p.unit"></span>
                                </div>
                            </div>
                            <div class="middle">
                                <div v-for="n in p.normList">
                                    <span>
                                        <span class="money" v-text="'¥'+n.price"></span>/<span v-text="n.unit"></span>
                                    </span>
                                    <div class="button">
                                        <img v-if="n.showControl && (numObj[p.id+'-'+n.id] && numObj[p.id+'-'+n.id]>0)" @click="clickReduce(p, n)" src="../../../../public/images/reduce.png" alt="减">
                                        <span v-if="n.showControl && (numObj[p.id+'-'+n.id] && numObj[p.id+'-'+n.id]>0)" @click="changeMask(p, n)" v-text="numObj[p.id+'-'+n.id]">1</span>
<!--
                                        <img v-if="isShowMask && product.id==p.id && product.nId==n.id" src="../../../../public/images/reduce.png" alt="减">
                                        <span v-if="isShowMask && product.id==p.id && product.nId==n.id" v-text="num">1</span>
-->
                                        <div @touchstart.prevent="n.click=!n.click" @touchend.prevent.stop="clickPlus(p, n)">
                                            <img class="no-touch" v-show="!n.click"  src="../../../../public/images/plus.png" alt="">
                                            <img class="has-touch" v-show="n.click" src="../../../../public/images/plus2.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <mt-tabbar v-model="selected">
        <mt-tab-item id="home">
            <img slot="icon" src="../../../../public/images/home-unselected.png">
            首页
        </mt-tab-item>
        <mt-tab-item id="all">
            <img slot="icon" src="../../../../public/images/all-selected.png">
            全部
        </mt-tab-item>
        <mt-tab-item id="cart">
            <sup v-if="cartNum>0" v-text="cartNumFilter"></sup>
            <img slot="icon" src="../../../../public/images/cart-unselected.png">
            购物车
        </mt-tab-item>
        <mt-tab-item id="mine">
            <img slot="icon" src="../../../../public/images/mine-unselected.png">
            我的
        </mt-tab-item>
    </mt-tabbar>
</div>
<script src="../../../../public/js/vue.js"></script>
<script src="../../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../../public/js/jquery.min.js"></script>
<script src="../../../../public/js/store.js"></script>
<script src="../../../../public/js/wechat/mixin.js"></script>
<script src="../../../../public/js/wechat/product/index.js"></script>
</body>
</html>